import React from 'react'
import {connect} from 'dva'
import {Table, Row, Col, Form, Input, Button, Popconfirm, icon} from 'antd';
import RightConstants from "../../../utils/RightConstants";
import RightBox from "../../../components/commons/RightBox";
import Constants  from '../../../utils/Constants';
import ProductCodeDetail from '../../../components/basedata/productCodeDetail';
const FormItem = Form.Item;


const customsProductCode = Form.create()(class CustomsProductCode extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'customsProductCode/getHscodeList', payload: { page: Constants.DEFAULT_PAGE, status: 1 } });
    }

    onEdit = (id) => {
        this.props.dispatch({
            type: 'customsProductCode/getHscodeById',
            payload: {id}
        });
        this.productCodeDetail.handleOpen();
    };
    
    handleSearch = (flag) => {
        let newPage = this.props.customsProductCode.page;
        if(flag) newPage.page = 1;
        this.props.dispatch({
            type: 'customsProductCode/getHscodeList',
            payload: {
                ...this.props.form.getFieldsValue(),
                page: newPage
            }
        });
    };

    columns = [{
        title: '海关商品码',
        dataIndex: 'hscode',
        key: 'hscode',
    }, {
        title: '税局商品码',
        dataIndex: 'taxcode',
        key: 'taxcode',
    }, {
        title: '商品名称',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '增值税率',
        dataIndex: 'zzrate',
        key: 'zzrate',
    }, {
        title: '消费税率',
        dataIndex: 'xfrate',
        key: 'xfrate',
    }, {
        title: '退税率',
        dataIndex: 'taxrate',
        key: 'taxrate',
    }, {
        title: '监管条件',
        dataIndex: 'supercondition',
        key: 'supercondition',
    }, {
        title: '申报要素',
        dataIndex: 'declarelements',
        key: 'declarelements',
    }, {
        title: '操作',
        render: (record) => {
            let editHsButton = <RightBox resource={RightConstants.BASEDATA.BASE_HSCODE_EDIT}>
                                    <a href="#" onClick={this.onEdit.bind(this, record.id)}>编辑</a><span className="ant-divider"/>          
                               </RightBox>;
                                                                                    
            let deleteHsButton=<RightBox resource={RightConstants.BASEDATA.BASE_HSCODE_DELETE}>
                <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={()=>{
                    this.props.dispatch({
                        type: 'customsProductCode/deleteHscodeById',
                        payload: {
                            id : record.id,
                            onSuccess: () => this.handleSearch()
                        }
                    });
                }} okText="是" cancelText="否">
                    <a href="#">删除</a>
                </Popconfirm>
            </RightBox>;
            return (
                <span>
                    {editHsButton}
                    {deleteHsButton}
                </span>
            );
        }
    }];

    render(){
        let formItemLayout = { labelCol: {span: 8}, wrapperCol: {span: 16}};
        let values = this.props.form.getFieldsValue();
        const { getFieldDecorator } = this.props.form;

        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.customsProductCode.page.size,
            current: this.props.customsProductCode.page.page,
            total: this.props.customsProductCode.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.customsProductCode.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'customsProductCode/getHscodeList',
                    payload: {
                       ...values,
                       status: 1,
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.customsProductCode.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'customsProductCode/getHscodeList',
                    payload: {
                        ...values,
                        status: 1,
                        page: newPage
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={6}>
                        <FormItem {...formItemLayout} label={'海关商品码'}>
                            {getFieldDecorator('hscode')(
                                <Input style={{width: 200}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col>
                        <Button type="primary" icon="search" style={{marginRight: 5}} onClick={this.handleSearch.bind(this, true)}>查询</Button>
                        <RightBox resource={RightConstants.BASEDATA.BASE_HSCODE_ADD}><Button icon="plus" onClick={this.onEdit.bind(this, null)}>添加海关商品码</Button></RightBox>
                    </Col>
                </Row>            

                <Table rowKey="id" dataSource={this.props.customsProductCode.list} loading={this.props.loading} columns={this.columns} bordered={true} size={'middle'} scroll={{ x: true }} pagination={pagination} />
                <ProductCodeDetail wrappedComponentRef={(inst) => this.productCodeDetail = inst} refreshList={this.handleSearch} />
            </div>
        );
    }

})

function mapStateToProps(state){
    return{
        loading: state.loading.models.customsProductCode, customsProductCode: state.customsProductCode
    };
}

export default connect(mapStateToProps)(customsProductCode);
